<template>
	<div class="box">
		<div class="banner" v-loading="isLoading" element-loading-text="Loading...">
			<el-carousel :interval="3000" v-if="bannerList.length > 0" arrow="always">
				<el-carousel-item v-for="item in bannerList" :key="item.id">
					<el-image :src="`${$Imgurl}/api/public/showImg/${item.picture}`" class="image"></el-image>
				</el-carousel-item>
			</el-carousel>
		</div>

		<div class="bookShow" v-loading="isLoading2">
			<h2>★好评最高5本书★</h2>
			<el-divider />
			<div class="bookitems">
				<div class="items" v-for="item in bookList1" :key="item.id">
					<el-image :src="`${$Imgurl}/api/public/showImg/${item.picture}`" lazy></el-image>
					<h3>{{ item.name }}</h3>
					<p>￥<span>{{ item.price }}</span></p>
					<p><button @click="addCart(item.id)">购买</button></p>
				</div>
			</div>
		</div>
		<el-divider />
		<div class="bookShow" v-loading="isLoading3">
			<h2>★销量最高5本书★</h2>
			<el-divider />
			<div class="bookitems">
				<div class="items" v-for="item in bookList2" :key="item.id">
					<el-image :src="`${$Imgurl}/api/public/showImg/${item.picture}`" lazy></el-image>
					<h3>{{ item.name }}</h3>
					<p>￥<span>{{ item.price }}</span></p>
					<p><button @click="addCart(item.id)">购买</button></p>
				</div>
			</div>
		</div>
		<el-divider />

		<div class="bookShow" v-loading="isLoading4">
			<h2>★意向最高5本书★</h2>
			<el-divider />
			<div class="bookitems">
				<div class="items" v-for="item in bookList3" :key="item.id">
					<el-image :src="`${$Imgurl}/api/public/showImg/${item.picture}`" lazy></el-image>
					<h3>{{ item.name }}</h3>
					<p>￥<span>{{ item.price }}</span></p>
					<p><button @click="addCart(item.id)">购买</button></p>
				</div>
			</div>
		</div>

		<span class="noshow">没有更多数据了……</span>
	</div>
</template>

<script>
import { $post } from "@/ajax";
import { showLoading } from "../../../utils/loading";
export default {
	name: '',
	data () {
		return {
			bookList1: [],
			bookList2: [],
			bookList3: [],
			bannerList: [],
			isLoading: true,
			isLoading2: true,
			isLoading3: true,
			isLoading4: true,
			showLoading: showLoading,
		}
	},
	methods: {
		// 发起异步请求
		async getBooklist1 (url) {
			const resultBookList1 = await this.axios.get(url);
			this.bookList1 = resultBookList1.data.data;
			// 如果请求成功了,就把loading隐藏
			if (resultBookList1.status === 200) {
				this.isLoading2 = false;
			}
		},

		async getBooklist2 (url) {
			const resultBookList2 = await this.axios.get(url);
			this.bookList2 = resultBookList2.data.data;
			// 如果请求成功了,就把loading隐藏
			if (resultBookList2.status === 200) {
				this.isLoading3 = false;
			}
		},

		async getBooklist3 (url) {
			const resultBookList3 = await this.axios.get(url);
			this.bookList3 = resultBookList3.data.data;
			// 如果请求成功了,就把loading隐藏
			if (resultBookList3.status === 200) {
				this.isLoading4 = false;
			}
		},

		async getbannerList (url) {
			const resultbannerList = await this.axios.get(url);
			this.bannerList = resultbannerList.data.data;
			// 如果请求成功了,就把loading隐藏
			if (resultbannerList.status === 200) {
				this.isLoading = false;
			}
		},

		// 添加购物车
		async addCart (id) {
			const token = localStorage.getItem('token');
			// 如果token 为空,直接return
			if (!token) {
				this.$message({
					message: '请先登录',
					type: 'warning',
					duration: 1500,
				});
				return;
			}

			const resultBuy = await $post(`/api/public/addCart/${id}`);

			if (resultBuy.status === 200) {
				this.$message({
					message: '添加成功',
					type: 'success'
				});
			} else {
				this.$message({
					message: '添加失败',
					type: 'error'
				});
			}

		}

	},
	mounted () { },
	created () {
		this.getBooklist1('/api/public/book/findFav5');
		this.getBooklist2('/api/public/book/findSale5');
		this.getBooklist3('/api/public/book/findRate5');
		this.getbannerList('api/public/findHot/5/1');
	}
}
</script>

<style scoped>
/* 全局样式 */
* {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 书籍样式 */
.box {
	width: 100%;
	height: 100%;
}

.bookitems {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	border: 1px solid gainsboro;
	padding: 20px 0;
	border-radius: 5px;
}

.items {
	width: 200px;
	height: 250px;
	background-color: #fff;
	margin-top: 20px;
	box-shadow: 0 0 10px #ccc;
	margin: 0 5px;
}

.items:hover {
	transform: scale(1.1);
	transition: all 0.5s;
}

.el-image {
	width: 200px;
	height: 130px;
}

.items h3 {
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	margin-top: 10px;
}

.items p {
	text-align: center;
	margin-top: 10px;
}

.items p span {
	font-size: 20px;
	color: red;
}

.items p button {
	width: 100px;
	height: 30px;
	background-color: #ccc;
	border: none;
	border-radius: 5px;
	margin-top: 10px;
	background-color: rgb(245, 108, 108);
	color: white;
}

.items p button:active {
	transform: scale(0.9);
}

.items p button:hover {
	background-color: rgb(248, 152, 152);
}

/* 分割线样式 */
.el-divider {
	margin: 20px 0;
}

/* 书籍展示样式 */
.bookShow {
	width: 100%;
	height: 100%;
	margin: 20px 0;
}

.bookShow h2 {
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	margin-top: 20px;
	color: goldenrod;
}

.banner {
	width: 90%;
	margin: 20px auto;
	height: 300px;
	border-radius: 5px;
}

.banner .el-image {
	width: 100%;
	height: 300px;
	border-radius: 5px;
}

.banner ul li {
	list-style: none;
}

.noshow {
	/* 垂直居中 */
	display: flex;
	justify-content: center;
	color: gray;
	margin: 20px 0;
}
</style>

